<template>
<!--  <component :is="tableComponentsChange"></component>-->
  <button @click="changeAB">切换使用组件B</button>
  <button @click="changeBC">切换使用组件C</button>
  <button @click="changeCA">切换使用组件A</button>
  <p>这里组件切换,被切换下来的组件会被协助</p>

  <p>想要组件在切换过程中保持存在,可以使用 keep-alive 包裹组件</p>
  <keep-alive>
    <component :is="tableComponentsChange"></component>
  </keep-alive>

</template>
<script>
import AComponent from "@/use/AComponent.vue";
import BComponent from "@/use/BComponent.vue";
// import CComponent from "@/use/CComponent.vue";
import {defineAsyncComponent} from "vue";
// 这里把 C组件变成异步加载的
const CComponent = defineAsyncComponent(()=>
    import("@/use/CComponent.vue")
)
// 这里改成异步组件以后看不出太大的区别,只不过在实际使用中,如果组件过多的情况下这个就比较有用了.
export default {
  data() {
    return {
      // 默认显示A组件
      tableComponentsChange: AComponent
    }
  },
  methods: {
    // 通过按钮控制显示不同的组件
    changeAB() {
      this.tableComponentsChange = BComponent
    },
    changeBC() {
      this.tableComponentsChange = CComponent
    },
    changeCA() {
      this.tableComponentsChange = AComponent
    }
  },
  components: {
    AComponent,BComponent,CComponent
  },
  // 点击切换组件的时候,可以看到组件被销毁的情况
  beforeUnmount() {
    console.log("组件销毁之前");
  },
  unmounted() {
    console.log("组件销毁之后");
  },
}
</script>